<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
.carousel-container {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.carousel-slides {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}
.carousel-slides img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prev-btn,
.next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}
.dots-container {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  margin: 0 5px;
  cursor: pointer;
}
    </style>
</head>
<body>
    <div class="carousel-container">
        <div class="carousel-slides">
          <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6b04dfc206dec442fe161b33082681ec.png?w=632&h=340" alt="Image 1">
          <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e981f78d2ac17c504975a719cb8b069d.png?w=632&h=340" alt="Image 2">
          <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6b0c7fadbd84a808287af5faad6e62d7.png?w=632&h=340" alt="Image 3">
        </div>
        <button class="prev-btn">&lt;</button>
        <button class="next-btn">&gt;</button>
        <div class="dots-container"></div>
      </div>
    
</body>
</html>
<script>
    window.onload = function () {
  const carouselSlides = document.querySelector('.carousel-slides');
  const prevBtn = document.querySelector('.prev-btn');
  const nextBtn = document.querySelector('.next-btn');
  const dotsContainer = document.querySelector('.dots-container');

  const slides = document.querySelectorAll('img');
  const slideCount = slides.length;
  let currentIndex = 0;

  // 创建小圆点并添加到容器中
  for (let i = 0; i < slideCount; i++) {
    const dot = document.createElement('div');
    dot.classList.add('dot');
    if (i === 0) {
      dot.classList.add('active');
    }
    dot.addEventListener('click', function () {
      goToSlide(i);
    });
    dotsContainer.appendChild(dot);
  }

  function goToSlide(n) {
    currentIndex = n;
    const offset = -currentIndex * 100 + '%';
    carouselSlides.style.transform = `translateX(${offset})`;
    updateDots();
  }

  function updateDots() {
    const dots = document.querySelectorAll('.dot');
    dots.forEach(dot => dot.classList.remove('active'));
    dots[currentIndex].classList.add('active');
  }

  prevBtn.addEventListener('click', function () {
    currentIndex = (currentIndex - 1 + slideCount) % slideCount;
    goToSlide(currentIndex);
  });

  nextBtn.addEventListener('click', function () {
    currentIndex = (currentIndex + 1) % slideCount;
    goToSlide(currentIndex);
  });
};
</script>